<template>
    <div id="rotation360" >
        <div class="container-360 flex-center">
            <video class="video-360" ref="video" :src="video.src" v-show="active==='rotate'"></video>
            <transition name="img">
                <img :src="imagesList[imgIndex]" alt="" ref="img" v-if="active==='rotate' && this.imagesList.length>1" @touchstart="touchStart" @mousedown="move">
            </transition>
        </div>
        <div class="bottom-handle flex-between">
            <div class="slider flex-between">
                <div class="tips" style="margin-right:17px">{{active==='rotate'?'0度':'-'}}</div>
                <div style="flex:1">
                    <el-slider v-model="sliderVal" :show-tooltip="false" :step="step" :max="max" @input="changeSliderVal"></el-slider>
                </div>
                <div class="tips" style="margin: 0 17px">{{active==='rotate'?'360度':'+'}}</div>
            </div>
            <div class="tool-type flex-start">
                <el-switch v-model="active" :disabled="this.imagesList.length<1" inactive-value="rotate" active-value="zoomIn" :active-text="this.imagesList.length<1?'':'放大'" inactive-text="旋转" @change="handleBtn">
                </el-switch>
                <!-- <div class="image-tool pointer flex-center" :class="{'active-tool':active==='rotate'}" @click="handleBtn('rotate')">
                    <img src="../../assets/img/reload.png" alt="">
                    旋转
                </div>
                <div class="image-tool pointer flex-center" v-if="this.imagesList.length>1" :class="{'active-tool':active==='zoomIn'}" @click="handleBtn('zoomIn')">
                    <img src="../../assets/img/zoom-in.png" alt="">
                    放大
                </div> -->
            </div>
            <div class="page-change-arrows flex-center">
                <v-touch v-on:tap="rotate(true)" v-if="active === 'rotate'">
                    <div class="change page-left flex-center pointer" @touchstart="rotate(false)" @mousedown="rotate(false)">
                        <img src="../../assets/img/round-rotate.png" alt="加载失败">
                    </div>
                </v-touch>
                <div class="change page-right flex-center pointer" v-else>
                    <img src="../../assets/img/round-zoom-out.png" @click="zoomOut" alt="加载失败">
                    <img src="../../assets/img/round-zoom-in.png" @click="zoomIn" alt="加载失败">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin/mixin'
export default {
    name: "Rotation360",
    mixins: [mixin],
    data() {
        return {
            imagesList: [],
            video: {
                src: '',
                thump: ''
            },
            imgIndex: 0,
            sliderVal: 0,
            videoTime: 0,
            max: 100,
            interval: null,
            active: 'rotate',
            step: 1,
            x: 0,
            y: 0,
            oldL: 0,
            oldY: 0,
            scale: 0,
            saveSliderVal: 0
        }
    },
    mounted() {
        if (this.bsr.images) {
            let imagesArry = this.bsr.images.split('|')
            console.log('images',this.bsr.images,Array.isArray(this.bsr.images));
            imagesArry.forEach(v => {
                let suffix = this.getFileSuffix(v)
                this.imagesList.push(window.$DATADIR + `resc/Rotation360/${this.bsr.id}/${v.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`)
            })
        }
        if (this.bsr.video) {
            this.video.src = window.$DATADIR + `resc/Rotation360/${this.bsr.id}/${this.bsr.video.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, '.bosm')}`
        }
        this.$nextTick(() => {
            this.playVideo()
        })
    },
    methods: {
        changeSliderVal(val) {
            if (this.active === 'rotate') {
                if (val === 0) return
                this.$refs.video.currentTime = val / 100 * this.videoTime
            } else {
                this.scale = val === 0 ? 0 : val / this.step * 0.4
                this.$refs.img.style.transform = `scale(${1 + this.scale},${1 + this.scale})`
            }
        },
        playVideo() {
            this.$refs.video.oncanplay = () => {
                this.videoTime = this.$refs.video.duration
                this.max = Math.floor(100 / 100 * this.videoTime * 6) * 100 / this.videoTime / 6
                if (this.active === 'rotate') {
                    this.step = 100 / this.videoTime / 6
                }
            }
        },
        handleBtn(handleVal) {
            // if (handleVal === this.active) return
            // this.active = handleVal
            if (handleVal === 'rotate') {
                this.step = 100 / this.videoTime / 6
                this.sliderVal = 0
                this.$refs.img.style.left = ''
                this.$refs.img.style.top = ''
                this.sliderVal = this.saveSliderVal
            }
            if (handleVal === 'zoomIn') {
                this.saveSliderVal = this.sliderVal
                this.$refs.video.currentTime = 0
                this.imgIndex = parseInt(this.sliderVal / this.step) >= this.imagesList.length ? this.imagesList.length - 1 : parseInt(this.sliderVal / this.step)
                this.step = this.max / 9
                this.sliderVal = 0
            }
        },
        mousemove(e) {
            let clientX = e.clientX ? e.clientX : e.changedTouches[0].clientX
            let clientY = e.clientY ? e.clientY : e.changedTouches[0].clientY
            let move = this.$refs.img
            move.style.left = clientX - this.x + this.oldL + 'px'
            move.style.top = clientY - this.y + this.oldY + 'px'
        },
        touchStart(e) {
            this.setPosition(e)
            document.documentElement.addEventListener('touchmove', this.mousemove)
            document.documentElement.addEventListener('touchend', this.touchEnd)
        },
        move(e) {
            this.setPosition(e)
            document.documentElement.addEventListener('pointermove', this.mousemove)
            document.documentElement.addEventListener('mouseup', this.mouseUp)
        },
        setPosition(e) {
            let clientX = e.clientX ? e.clientX : e.changedTouches[0].clientX
            let clientY = e.clientY ? e.clientY : e.changedTouches[0].clientY
            let move = this.$refs.img
            this.x = clientX
            this.y = clientY
            this.oldL = move.style.left ? parseInt(move.style.left) : parseInt(window.getComputedStyle(move).left) //第一次获取不到css标签中的值
            this.oldY = move.style.top ? parseInt(move.style.top) : parseInt(window.getComputedStyle(move).top) //第一次获取不到css标签中的值
        },
        mouseUp(e) {
            document.documentElement.removeEventListener('pointermove', this.mousemove)
        },
        touchEnd(e) {
            document.documentElement.removeEventListener('touchmove', this.mousemove)
        },
        zoomIn() {
            if (this.active !== 'zoomIn') return
            this.sliderVal += this.max / 9
            this.scale += 0.4
        },
        zoomOut() {
            if (this.active !== 'zoomIn') return
            this.sliderVal -= this.max / 9
            this.scale -= 0.4
        },
        rotate(once) {
            document.documentElement.addEventListener('touchend',this.releaseRotate)
            document.documentElement.addEventListener('mouseup',this.releaseRotate)
            if (this.active !== 'rotate') return
            if (once) {
                this.$refs.video.currentTime += 0.167
                this.sliderVal += 100 / this.videoTime / 6
                if (this.sliderVal >= this.max) {
                    this.sliderVal = 0
                    this.$refs.video.currentTime = 0
                }
            } else {
                this.interval = setInterval(() => {
                    this.$refs.video.currentTime += 0.167
                    this.sliderVal += 100 / this.videoTime / 6
                    if (this.sliderVal >= this.max) {
                        this.sliderVal = 0
                        this.$refs.video.currentTime = 0
                    }
                }, 50)
            }
        },
        releaseRotate() {
            if (this.interval) {
                clearInterval(this.interval)
            }
            document.documentElement.removeEventListener('touchend',this.releaseRotate)
            document.documentElement.removeEventListener('mouseup',this.releaseRotate)
        },
    },
}
</script>

<style lang="scss">
#rotation360 {
    .img-enter-active,
    .img-leave-active {
        transition: opacity 0.8s;
    }
    .img-enter,
    .img-leave-to {
        opacity: 0;
    }
    .tool-type {
        width: 130px;
        .el-switch__core {
            border: none;
            background: #409eff;
        }
    }
    .container-360 {
        width: 100vw;
        height: calc(100vh - 80px);
        position: relative;
        overflow: hidden;
        .video-360 {
            height: 100%;
        }

        img {
            height: 100%;
            position: absolute;
        }
    }
    .bottom-handle {
        width: 100vw;
        height: 50px;
        background-color: #dcdfe7;
        padding: 0 20px;
        box-sizing: border-box;
        .image-tool {
            width: 100px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid rgba(72, 148, 255, 1);
            color: rgba(72, 148, 255, 1);
            border-radius: 16px;
            margin-right: 14px;
            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
            }
        }
        .slider {
            flex: 1;
            .tips {
                font-size: 14px;
                color: #606266;
            }
        }
        .active-tool {
            background: rgba(72, 148, 255, 1);
            color: #fff;
        }
        .page-change-arrows {
            width: 64px;
        }
        .change {
            img {
                width: 32px;
                height: 32px;
                margin-right: 5px;
            }
        }
    }
}
</style>
